import axios from '../../../../../../../../util/axios'
import { useState, useEffect, useRef } from 'react'
import { Table, Switch, Space, Select, Input, Modal, Form, Button } from 'antd';
import './index.css'
const { Search } = Input;
const { Option } = Select;
const Booking_shop = () => {
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '商品ID',
            dataIndex: 'shangid',
            key: 'shangid',
        },
        {
            title: '团长',
            dataIndex: 'tuan',
            key: 'tuan',
        },
        {
            title: '商品图片',
            dataIndex: 'img', 
            key: 'img',
            render: (text, record) => {
                return <>
                    <img style={{ height: "80px", width: "80px" }} src={record.img} alt="" />
                </>
            }
        },
        {
            title: '原价',
            dataIndex: 'yjia',
            key: 'yjia',
        },
        {
            title: '拼团价',
            dataIndex: 'pjia',
            key: 'pjia',
        },
        {
            title: '成员人数',
            dataIndex: 'chenren',
            key: 'chenren',
        },
        {
            title: '参与人数',
            dataIndex: 'canren',
            key: 'canren',
        },
        {
            title: '结束时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '拼团状态',
            dataIndex: 'lls',
            key: 'lls',
            render: (text, record) => {
                return <>
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={text === "true" ? true : false} />
                </>
            }
        },
        {
            title: '活动状态',
            dataIndex: 'huoz',
            key: 'huoz',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <Button onClick={() => { handleEdit(record) }}>编辑</Button>
                    <Button onClick={() => { handleDel(record) }}>删除</Button>
                </Space>
            ),
        },
    ];
    const [list, setlist] = useState([])
    const [form] = Form.useForm();
    const [title, settitle] = useState("")
    const [isModalVisible, setIsModalVisible] = useState(false);
    const ID = useRef()
    const Tuan = useRef()
    const Yjia = useRef()
    const Pjia = useRef()
    const Chenren = useRef()
    const Canren = useRef()
    const Time = useRef()
    const Huoz = useRef()
    useEffect(() => {
        getlist()
    }, [])
    const getlist = async () => {
        let res = await axios.get('/grouppurchase')
        setlist([...res.data.data])
    }
    //筛选
    const handleChange = async (value) => {
        let res = await axios.get('/grouppurchasesou', {
            params: { sou: value }
        })
        setlist([...res.data.data])
    }
    //搜索
    const onSearch = async (value) => {
        console.log(value)
        if (value === "") {
            getlist()
        } else {
            let res = await axios.get('/grouppurchasesou', {
                params: { name: value }
            })
            setlist([...res.data.data])
        }

    }
    //删除
    const handleDel = async (record) => {
        let res = await axios.delete('/grouppurchasedel', {
            params: { id: record.id }
        })
        console.log(res)
        getlist()
    }
    //编辑
    const handleEdit = (record) => {
        setIsModalVisible(true);
        settitle("编辑")
        form.setFieldsValue({ ...record })
    };

    const handleOk = async () => {
        const id = ID.current.state.value
        const tuan = Tuan.current.state.value
        const yjia = Yjia.current.state.value
        const pjia = Pjia.current.state.value
        const chenren = Chenren.current.state.value
        const time = Time.current.state.value
        const huoz = Huoz.current.state.value
        console.log(id, tuan, yjia, pjia, chenren, time, huoz)
        setIsModalVisible(false);
        if(title==="编辑"){
              let res = await axios.post('/BookListEdit', {
            id, tuan, yjia, pjia, chenren, time, huoz
        })
          getlist()
        console.log(res)
        }
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    return <div>
        <div className="bookingheader">
            <div>拼团状态:
                <Select defaultValue="请选择" style={{ width: 200 }} onChange={handleChange}>
                    <Option value="请选择">请选择</Option>
                    <Option value="开启">开启</Option>
                    <Option value="关闭">关闭</Option>
                </Select></div>
            <p className="bookingheadersearch">
                <span className="sea">商品搜索:</span><Search placeholder="请输入商品名搜索称、ID" onSearch={onSearch} enterButton />
            </p>
        </div>
        <Modal title={title} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <Form form={form}>
                <Form.Item name="shangid" label="商品ID">
                    <Input disabled="false" ref={ID} />
                </Form.Item>
                <Form.Item name="tuan" label="团长">
                    <Input ref={Tuan} />
                </Form.Item>
                <Form.Item name="yjia" label="原价">
                    <Input ref={Yjia} />
                </Form.Item>
                <Form.Item name="pjia" label="拼团价">
                    <Input ref={Pjia} />
                </Form.Item>
                <Form.Item name="chenren" label="成员人数">
                    <Input ref={Chenren} />
                </Form.Item>
                <Form.Item name="canren" label="参与人数">
                    <Input ref={Canren} />
                </Form.Item>
                <Form.Item name="time" label="结束时间">
                    <Input ref={Time} />
                </Form.Item>
                <Form.Item name="huoz" label="活动状态">
                    <Input ref={Huoz} />
                </Form.Item>
            </Form>
        </Modal>

        <Table columns={columns} dataSource={list} rowKey="id" pagination={{ pageSize: 5 }} />
    </div>
}
export default Booking_shop